import { FormSchema } from '/@/components/Form';
import type { Rule } from 'ant-design-vue/es/form';
import { getDeptTreeByPage } from '/@/api/admin/dept';
import { getRoleList } from '/@/api/admin/user';
import { verify } from '/@/utils/validator';

const phoneCheck = async (_rule: Rule, value: string) => {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    return Promise.reject('请输入正确的手机号码');
  }
  return Promise.resolve();
};

let newPassword = '';

const checkPassWord = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('请输入密码');
  }

  if (verify.includesZh.value.test(value)) {
    return Promise.reject('密码中不能包含汉字、汉字符号等特殊字符');
  }
  if (value.trim().length < 6) {
    return Promise.reject('密码至少6位数');
  }

  return Promise.resolve();
};

const checkPassWordAlign = async (_rule: Rule, value: string) => {
  if (value && value !== newPassword) {
    return Promise.reject('两次密码输入不一致');
  }
  return Promise.resolve();
};

export const schemasForm = (callback?: Fn): FormSchema[] => [
  {
    field: 'username',
    component: 'Input',
    label: '用户名',
    required: true,
    componentProps: {
      disabled: true,
      placeholder: '请输入用户名',
    },
  },
  {
    field: 'name',
    component: 'Input',
    label: '姓名',
    required: true,
    componentProps: {
      maxlength: 20,
      disabled: true,
      placeholder: '请输入姓名',
    },
  },
  {
    field: 'deptId',
    component: 'ApiTreeSelect',
    label: '所属部门',
    required: true,
    componentProps: {
      api: getDeptTreeByPage,
      disabled: true,
      placeholder: '请选择所属部门',
      labelField: 'name',
      valueField: 'id',
    },
  },
  {
    field: 'userSex',
    component: 'RadioGroup',
    label: '性别',
    required: true,
    componentProps: {
      disabled: true,
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
    },
  },
  {
    field: 'phone',
    component: 'Input',
    label: '手机号',
    required: true,
    rules: [{ required: true, validator: phoneCheck, trigger: 'blur' }],
    componentProps: {
      maxlength: 11,
      placeholder: '请输入手机号',
      disabled: true,
    },
  },
  {
    field: 'role',
    component: 'ApiSelect',
    label: '所属角色',
    required: true,
    componentProps: {
      api: async () => {
        const list = await getRoleList();
        callback && callback(list);
        return list;
      },
      placeholder: '请选择所属角色',
      disabled: true,
      mode: 'multiple',
      labelField: 'roleName',
      valueField: 'roleId',
    },
  },
];

export const editPasswordForm: FormSchema[] = [
  {
    field: 'password',
    component: 'InputPassword',
    label: '当前密码',
    required: true,
    rules: [{ required: true, validator: checkPassWord, trigger: 'blur' }],
    componentProps: {
      placeholder: '请输入当前密码',
      maxlength: 20,
      autocomplete: 'new-password',
    },
  },
  {
    field: 'newPassword',
    component: 'InputPassword',
    label: '新密码',
    required: true,
    rules: [{ required: true, validator: checkPassWord, trigger: 'blur' }],
    componentProps: {
      placeholder: '请输入新密码',
      maxlength: 20,
      autocomplete: 'new-password',
      onChange(value) {
        newPassword = value.target.value;
      },
    },
  },
  {
    field: 'alignPassword',
    component: 'InputPassword',
    label: '再次输入密码',
    required: true,
    rules: [
      { required: true, validator: checkPassWord, trigger: 'blur' },
      { required: true, validator: checkPassWordAlign, trigger: 'blur' },
    ],
    componentProps: {
      placeholder: '请再次输入新密码',
      maxlength: 20,
      autocomplete: 'new-password',
    },
  },
];
